<template>
  <div class="myxing">
    <div class="box" v-for="n in 5" :key="n" @click="selected(n)">
      <img
        src="https://www.viplxy.com/smallRoutineTest/images/shouchang.png"
        alt=""
        v-show="cur < n"
      />
      <img
        src="https://www.viplxy.com/smallRoutineTest/images/shouchang_check.png"
        alt=""
        v-show="cur >= n"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cur: -1, //评分星星下标
    };
  },
  methods: {
    //评分点击事件
    selected(n) {
    //   console.log(n);
      this.cur = n ;
      //   console.log(this.cur);
    },
  },
};
</script>

<style lang="scss" scoped>
.myxing {
  width: 100%;
  display: flex;
  .box {
    img {
      width: 30px;
      height: 30px;
    }
  }
}
</style>